<template>
    <div class="grid place-items-center w-screen h-screen  bg-[url('@/assets/bg2.jpg')]">
        <div class="flex flex-col gap-5 justify-center items-center m-5">
            <el-form ref="ruleFormRef"  :model="ruleForm" status-icon 
                label-width="auto" class=" border-solid  bg-white  p-2">
                <h5 class=" content-center text-center mb-1 text-min-size font-bold">欢迎登录</h5>
                <el-form-item label="用户名" prop="userName">
                    <el-input v-model="ruleForm.userName" type="text" autocomplete="off" />
                </el-form-item>  
                    <el-form-item label="密码" prop="password">
                 <el-input v-model="ruleForm.password" type="password" autocomplete="off" />
                </el-form-item>
                <el-form-item>
                    <div class=" flex justify-around  ">
                        <el-button type="primary" @click="submitForm(ruleFormRef)">
                        登录
                    </el-button>
                    <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                    </div>
                </el-form-item>
            </el-form>      
        </div>
    </div>
</template>

<script setup lang="ts">
import { login } from "@/api";
import { ElForm, ElInput,ElMessage } from "element-plus";
import { onMounted, reactive, ref } from 'vue'
import type { FormInstance } from 'element-plus'
import { useUserStore} from "@/store"
import { useRouter } from "vue-router";
const router = useRouter();

// 
const userStore = useUserStore()

const ruleFormRef = ref<FormInstance>()

// onMounted(()=>{
//     userStore.layout();
// })

const ruleForm = reactive({
    password: '',
    userName: '',
    name:''
})


const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            console.log('submit!',ruleForm)//登录成功后
           login(ruleForm.userName,ruleForm.password).then(res => {
                userStore.userName=res.data.data.name
                userStore.id=res.data.data.id
                userStore.password=res.data.data.password
                userStore.account=res.data.data.account
                userStore.role=res.data.data.role
                userStore.status=res.data.data.status
            })
            ElMessage({
                message: `用户${userStore.userName}登录成功`,
                type: 'success',
            })
            router.push({
                name: 'about'
            })
        } else {
            console.log('error submit!')
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}


</script>

<style lang="less" scoped>
</style>